<template>
	<div>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="name" label="考试名称" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<span class="cup" @click="handleEdit(row)">{{ row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="paperId" label="试卷" width="200" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<span class="cup" title="点击预览试卷" @click="handleTastPreview(row.testPaper)">{{ row.testPaper.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="examClassId" label="分类" width="100" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<span>{{ row.sysClassify.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" width="100">
				<template slot-scope="{ row }">
					<el-tag v-if="row.status == 1" size="small">正常</el-tag>
					<el-tag v-if="row.status == 2" size="small" type="danger">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="permission" label="考试时间" width="160">
				<template slot-scope="{ row }">
					<p>{{ row.startTime }}</p>
					<p>{{ row.endTime }}</p>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
			<el-table-column label="操作" width="220">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="success" size="mini" @click="handleExamLog(row)">考试记录</el-button>
						<el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
			<div slot="empty" class="emptyBg">
				<el-empty :image-size="200"></el-empty>
			</div>
		</el-table>
		<Pagination
			v-show="parseInt(pageObj.count) > 0"
			:total="parseInt(pageObj.count)"
			@change="getList"
			:page.sync="listQuery.page"
			:limit.sync="listQuery.limit"
		/>
		<TastPreview />
		<QuestionPreview />
	</div>
</template>
<script>
export default {
	components: {
		TastPreview: () => import('../testPaper/TastPreview.vue'),
		QuestionPreview: () => import('../public/QuestionPreview.vue')
	},
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10
			},
			tableData: [],
			pageObj: {}
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		async getList() {
			let res = await this.$store.dispatch('testExamList', this.listQuery);
			this.tableData = res.data;
			this.pageObj = res;
		},
		handleTastPreview(row) {
			this.$bus.$emit('showDialogTastPreview', row);
		},
		handleExamLog(row) {
			this.$store.commit('SET_ACTIVENAME', 'examLog');
			this.$store.commit('SET_ACTIVEROW', row);
		},
		handleEdit(row) {
			this.$store.commit('SET_ACTIVEROW', row);
			this.$store.commit('SET_ACTIVENAME', 'create');
		},
		handleDelete(row) {
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.delete(row);
				})
				.catch(() => {});
		},
		async delete(row) {
			await this.$store.dispatch('testExamDel', row);
			this.getList();
		}
	}
};
</script>
<style scoped lang="scss"></style>
